<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>user.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<link href="css/redmond/jquery-ui-1.8.14.custom.css" rel="stylesheet"
			type="text/css" />
		<script src="js/jquery-1.5.1.min.js"></script>
		<script src="js/jquery-ui-1.8.14.custom.min.js"></script>

		<script>
	$(document).ready(function() {
		var name=$("#username"),
			pass=$("#userpass"),
			allFields = $( [] ).add( name ).add( pass ),
			tips = $( ".tips" );
		//显示错误提示
		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}
		//名为n的o对象的长度
		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( n + " 的长度设定在 " +
					min + " 和 " + max + "之间" );
				return false;
			} else {
				return true;
			}
		}
		//正则匹配
		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		
		$("#dialog").dialog( {
			autoOpen : true,
			modal : true,
			buttons : {
				"确定" : function() {
			var bValid = true;
			allFields.removeClass( "ui-state-error" );
			//注意这种写法，如果bvalid已经为false，则之后的&&就不必再比较
			bValid = bValid && checkLength( name, "姓名", 3, 20);
			bValid = bValid && checkLength( pass, "密码", 3, 20);
			bValid = bValid && checkRegexp( name, /\w/,"要求输入数字、字母或下划线");
			bValid = bValid && checkRegexp( pass, /\w/,"要求输入数字、字母或下划线");
				
					if (bValid) {
						$("#form").submit();
					}
				},
				"重置" : function() {
					$("#form")[0].reset();
				}
			},
			"取消" : function() {
				allFields.val("").removeClass("ui-state-error");
			}

		});
		// username
		$("#username").focus(function() {
			value = $(this).val();
			if (value == this.defaultValue) {
				$(this).val('');
			}
		})
		$("#username").blur(function() {
			value = $(this).val();
			if (value == '') {
				$(this).val(this.defaultValue);
			}
		})
		// userpass
		$("#userpass").focus(function() {
			value = $(this).val();
			if (value == this.defaultValue) {
				$(this).val('');
			}
		})
		$("#userpass").blur(function() {
			value = $(this).val();
			if (value == '') {
				$(this).val(this.defaultValue);
			}
		})
	});
</script>
	</head>

	<body style="font-size:70%;">
		<div id="dialog" title="登陆">
			<p class="tips"></p>
			<form id="form" action="login" method="post">
				<ul style="list-style: none">
					<li>
						<label for="username">姓名</label>
						<input type="text" id="username" value="999" name="username">
					</li>
					<li>
						<label for="userpass">密码</label>
						<input type="password" id="userpass" value="ooo" name="userpass">
					</li>
				</ul>
			</form>
		</div>
	</body>
</html>
